<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.0.0}" rel="stylesheet" />
    <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet" />
    <link href="../static/ruoyi/css/index.css" th:href="@{/ruoyi/css/index.css}" rel="stylesheet" />
    <link href="../static/css/pindex.css" th:href="@{/css/pindex.css}" rel="stylesheet" />
	
	<style>
		.tabsbody .tabsbody-item {
		    height: 100%;
		    width: 100%;
		    display: none;
		}
		.tabsbody .tabsbody-item.active {
		    display: block;
		}
		.map-view {
            height: 100%;
            width: 100%;
            position: relative;
        }

        .anchorBL {
            display: none
        }

        .attn-echarts {
            width: 95%;
            padding-left: 1%;
            height: 240px;
        }
	</style>
</head>

<body class="gray-bg">
    <div class="row  border-bottom white-bg header">
        <div class="col-sm-12">         
            <ul class="navtop_tabs pull-right" style="overflow: hidden;">
                <!-- <li class="tab-item active" data-id="0" style="width: 120px;height: 36px;line-height:36px">项目全过程管理</li> -->
                <a href="/main/myMain/main1"><li class="tab-item" data-id="1" style="width: 120px;height: 36px;line-height:36px">项目施工管理</li></a>
            </ul>
        </div>
    </div>
    <div class="tabsbody">
	    <div class="tabsbody-item active">
	      <div class="wrapper wrapper-content animated fadeInRight" style="padding:0px 20px 20px 20px">
        <div class="row">
            <div class="col-sm-6" style="padding: 0;">
                <div class="ibox">
                    <div class="ibox-title">
                        <span class="label label-primary pull-left" style="font-size: 14px;">项目概况</span>
                        <!-- <h3>项目概况</h3> -->
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-6">
                                <div id="a1"></div>
                            </div>
                            <div class="col-sm-6">
                                <div id="a2"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6" style="padding: 0;">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-left" style="font-size: 14px;">工程信息</span>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="zs-top">
                                    <div class="zs1">
                                        <p id="total">2</p>
                                        <span>工程总数</span>
                                    </div>
                                    <div class="zs2">
                                        <p><span id="inTotal">2</span></p>
                                        <span>在建</span>
                                    </div>
                                    <div class="zs3">
                                        <p><span id="stopTotal">0</span></p>
                                        <span>停工</span>
                                    </div>
                                </div>
                                <div class="zs-bottom">
                                    <div class="zs4" id="My-ec1">
                                    </div>
                                    <div class="zs5" id="My-ec2">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="row">
                                    <ul class="nav_tabs" style="overflow: hidden;padding-left: 90px;">
                                        <li class="tab-item active" data-id="0"
                                            style="width: 80px;height: 36px;line-height:36px">房建</li>
                                        <li class="tab-item" data-id="1"
                                            style="width: 80px;height: 36px;line-height:36px">市政</li>
                                    </ul>
                                </div>
                                <div class="row">
                                    <div id="My-ec13"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="ibox">
                <div class="ibox-title">
                    <span class="label label-primary pull-left" style="font-size: 14px;">陵水建筑工程质量安全情况</span>
                    <!-- <h5>IT-02 - 开发部</h5> -->
                </div>
                <div class="ibox-content">
                    <ul class="uls">
                        <li class="title"><span>监督中项目总数：</span><span
                                style="color:#01AAED;">&nbsp;515&nbsp;</span>个,监督面积<span
                                style="color:#01AAED;">&nbsp;8040&nbsp;</span>万m²,其中本年度：<span
                                style="color:#01AAED;">&nbsp;2540&nbsp;</span>个,本月：<span
                                style="color:#01AAED;">&nbsp;25&nbsp;</span>个
                        </li>
                    </ul>
                    <div>
                    </div>
                    <div class="row  m-t-sm">
                        <div class="col-sm-8">
                            <p style="padding-bottom: 4px;margin-left: 8px;">监督中项目数及比例：</p>
                            <div style="width: 100%;margin-left: 8px;">
                                <p style="display: inline-block;width: 40%;">陵水：<span style="color:#01AAED;">25</span>
                                </p>
                                <p style="display: inline-block;width: 40%;">比例：<span
                                        style="color:#01AAED;">22.82%</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <span class="label label-primary pull-left" style="font-size: 14px;">陵水图审情况</span>
                    <!-- <h5></h5> -->
                </div>
                <div class="ibox-content">
                    <ul class="uls">
                        <li class="title"><span>本年度施工图审查通过次数：</span><span
                                style="color:#01AAED;">&nbsp;3344&nbsp;</span>次,总面积<span
                                style="color:#01AAED;">&nbsp;804&nbsp;</span>万m²,项目数<span
                                style="color:#01AAED;">&nbsp;2540&nbsp;</span>个,违反强条次数：<span
                                style="color:#01AAED;">336</span>次;
                        </li>
                        <li class="title"><span>本年度勘察成果审查通过次数:</span><span
                                style="color:#01AAED;">&nbsp;2058&nbsp;</span>次,总进尺<span
                                style="color:#01AAED;">&nbsp;2540&nbsp;</span>项目数：<span
                                style="color:#01AAED;">132</span>个,违反强条次数：<span style="color:#01AAED;">36</span>次;
                        </li>
                    </ul>
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <span class="label label-primary pull-left" style="font-size: 14px;">陵水施工许可证发放与竣工验收备案情况</span>
                    <!-- <h5></h5> -->
                </div>
                <div class="ibox-content">
                    <ul class="uls">
                        <li class="title"><span>本年度施工许可证发放数：</span><span
                                style="color:#01AAED;">&nbsp;2254&nbsp;</span>,建筑面积：<span
                                style="color:#01AAED;">&nbsp;804&nbsp;</span>万m²,项目数<span
                                style="color:#01AAED;">&nbsp;2540&nbsp;</span>个,单位工程数：<span
                                style="color:#01AAED;">3360</span>次
                        </li>
                        <li class="title"><span>本年度竣工验收备案证发放数:</span>,建筑面积：<span
                                style="color:#01AAED;">&nbsp;588&nbsp;</span>万m²,项目数<span
                                style="color:#01AAED;">&nbsp;2540&nbsp;</span>项目数：<span
                                style="color:#01AAED;">132</span>个,单位工程数：<span style="color:#01AAED;">1136</span>次;
                        </li>
                    </ul>
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <span class="label label-primary pull-left" style="font-size: 14px;">提示信息</span>
                    <!-- <h5></h5> -->
                </div>
                <div class="ibox-content">
                    <ul class="uls">
                        <li class="title">未按照要求安装远程视频监控的项目：<span>海南清水湾B11-1、B11-2区2栋公寓、4栋高层及地下车库工程 </span>
                        </li>
                        <li class="title">未按照要求安装实名制系统的项目：<span>雅居乐金沙湾健康教育新城项目A1401地块 </span></li>
                        <li class="title">未按照要求购买安全责任保险的项目：<span>海航YOHO湾(A1,A2,A3,A5,A6,地下室) </span></li>
                        <li class="title">未按照要求安装建机监测系统的项目：<span>海航YOHO湾(A1,A2,A3,A5,A6,地下室) </span></li>
                    </ul>
                    </ul>
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <span class="label label-primary pull-left" style="font-size: 14px;">重点关注项目</span>
                    <!-- <h5></h5> -->
                </div>
                <div class="ibox-content">
                    <ul class="uls">
                        <li class="title">1、<span>海南清水湾B11-1、B11-2区2栋公寓、4栋高层及地下车库工程 </span>
                        </li>
                        <li class="title">2、<span>雅居乐金沙湾健康教育新城项目A1401地块 </span>
                        </li>
                        <li class="title">3、<span>海航YOHO湾(A1,A2,A3,A5,A6,地下室) </span></li>
                    </ul>
                    </ul>
                </div>
            </div>
        </div>
    </div>
	    
	    </div>

    </div>
    
    <script src=" https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"> </script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script th:src="@{/js/sys/echarts-v4.1.0/echarts.min.js}"></script>
    <script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=3.2.0}"></script>
    <script>
        $(document).ready(function () {
            var fjnumber, sznumber, fjbutTotal, fjundTotal, fjmainTotal, fjtopTotal, szbutTotal, szundTotal,
                szmainTotal, sztopTotal, subtext;
            $('.nav_tabs li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                var index = $(this).index();
                getChartCount(index);
            })
            $('.navtop_tabs li').click(function () {
            	 $(this).addClass('active').siblings().removeClass('active');
            	 var index = $(this).index();
                 $(".tabsbody .tabsbody-item").eq(index).show().siblings().hide();
            })
            getChartCount(0);
            nianLingChartShow();
            proStatusChartShow();
            shiZhengShow();
            // fangJianShow();
            echartdata();

            function getChartCount(type) {
                var result = {
                    "success": true,
                    "message": "查询成功",
                    "data": {
                        "topTotal": 0,
                        "butTotal": 0,
                        "undTotal": 0,
                        "mainTotal": 0,
                        "houseTotal": 2,
                        "total": 2,
                        "inTotal": 2,
                        "govTotal": 0,
                        "stopTotal": 0
                    }
                }
                if (result.success) {
                    var data = result.data;
                    if (type == 1) {
                        fjbutTotal = data.butTotal;
                        fjundTotal = data.undTotal;
                        fjmainTotal = data.mainTotal;
                        fjtopTotal = data.topTotal;
                        subtext = '市政';
                        $("#total").text(result.data.total);
                        $("#totalSection").text(result.data.total);
                        $("#inTotal").text(result.data.inTotal);
                        $("#stopTotal").text(result.data.stopTotal);
                        fjnumber = result.data.govTotal;
                        sznumber = result.data.govTotal;
                    } else {
                        fjbutTotal = data.butTotal;
                        fjundTotal = data.undTotal;
                        fjmainTotal = data.mainTotal;
                        fjtopTotal = data.topTotal;
                        subtext = '房建';
                        $("#total").text(result.data.total);
                        $("#totalSection").text(result.data.total);
                        $("#inTotal").text(result.data.inTotal);
                        $("#stopTotal").text(result.data.stopTotal);
                        fjnumber = result.data.houseTotal;
                        sznumber = result.data.govTotal;
                    }
                    fangJianShow()
                }
            }


            //工程信息-房建
            function proStatusChartShow() {
                //查询房建信息数
                var proStatusChart = echarts.init(document.getElementById('My-ec1'));
                var data = [fjnumber]
                var titlename = ['房建 ' + fjnumber];
                //debugger
                var valdata = [fjnumber + sznumber]
                var myColor = ['#1089E7'];
                var option = {
                    xAxis: {
                        show: false
                    },
                    grid: {
                        left: '40%',
                    },
                    yAxis: [{
                        show: true,
                        data: titlename,
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#333',
                            fontSize: 18,
                            margin: 50,
                            rich: {
                                lg: {
                                    backgroundColor: '#339911',
                                    color: '#333',
                                    borderRadius: 15,
                                    // padding: 5,
                                    align: 'center',
                                    width: 15,
                                    height: 15
                                },
                            }
                        },


                    }, {
                        show: false,
                        inverse: false,
                        data: valdata,
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },

                    }],
                    series: [{
                        name: '框',
                        type: 'bar',
                        yAxisIndex: 1,
                        barGap: '-100%',
                        data: [valdata],
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                // borderColor: '#E6E7E9',
                                borderWidth: 3,
                                barBorderRadius: 15,
                                color: 'rgba(0, 213, 255,0.2)'
                            }
                        }
                    }, {
                        name: '条',
                        type: 'bar',
                        yAxisIndex: 0,
                        align: 'right',
                        data: data,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 10,
                                color: '#5FB878'
                            }
                        }
                    }]
                };
                //赋值操作
                proStatusChart.setOption(option);
                window.onresize = function () {
                    proStatusChart.resize()
                };
            }

            //工程信息-市政
            function shiZhengShow() {
                var shizhengChart = echarts.init(document.getElementById('My-ec2'));
                var data = [sznumber]
                var titlename = ['市政 ' + sznumber];
                var valdata = [fjnumber + sznumber]
                var myColor = ['#1089E7'];
                var option = {
                    xAxis: {
                        show: false
                    },
                    grid: {
                        left: '40%',
                    },
                    yAxis: [{
                        show: true,
                        data: titlename,
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#333',
                            fontSize: 18,
                            margin: 50,
                            rich: {
                                lg: {
                                    backgroundColor: '#339911',
                                    color: '#333',
                                    borderRadius: 15,
                                    // padding: 5,
                                    align: 'center',
                                    width: 15,
                                    height: 15
                                },
                            }
                        },


                    }, {
                        show: false,
                        inverse: false,
                        data: valdata,
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },

                    }],
                    series: [{
                        name: '框',
                        type: 'bar',
                        yAxisIndex: 1,
                        barGap: '-100%',
                        data: [valdata],
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                // borderColor: '#E6E7E9',
                                borderWidth: 3,
                                barBorderRadius: 15,
                                color: 'rgba(0, 213, 255,0.2)'
                            }
                        }
                    }, {
                        name: '条',
                        type: 'bar',
                        yAxisIndex: 0,
                        align: 'right',
                        data: data,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 10,
                                color: ' #00d8fe'
                            }
                        }
                    }]
                };
                //赋值操作
                shizhengChart.setOption(option);
                window.onresize = function () {
                    shizhengChart.resize()
                };
            }

            //工程信息-总房建-右边
            function fangJianShow() {
                var fangjianChart = echarts.init(document.getElementById('My-ec13'));
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br />{b}: {c} ({d}%)"
                    },
                    grid: {
                        //left: '10%',
                    },
                    title: {
                        text: fjnumber,
                        subtext: subtext,
                        //padding: 110,
                        textStyle: {
                            color: '#333',
                            fontSize: 28,
                            align: 'center'
                        },
                        subtextStyle: {
                            fontSize: 18,
                            color: ['#333']
                        },
                        x: '30%',
                        y:'center',
                        textAlign:"center"
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        x: 'right',
                        y: 'center',
                        // padding: 40,
                        // margin: 20,
                        textStyle: {
                            color: '#333',
                            fontSize: 12,
                        },
                        icon: 'circle',
                        data: ['基坑阶段' + fjbutTotal, '地下结构' + fjundTotal, '封顶' + fjtopTotal, '主体结构' +
                            fjmainTotal
                        ]
                    },
                    color: ['#00b8fe', '#c889f7', '#f6f886', '#14d29d'],
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '60%'],
                        center: ['30%', '50%'],
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        data: [{
                                value: fjbutTotal,
                                name: '基坑阶段' + fjbutTotal
                            },
                            {
                                value: fjundTotal,
                                name: '地下结构' + fjundTotal
                            },
                            {
                                value: fjtopTotal,
                                name: '封顶' + fjtopTotal
                            },
                            {
                                value: fjmainTotal,
                                name: '主体结构' + fjmainTotal
                            }
                        ]
                    }]
                };
                //赋值操作
                fangjianChart.setOption(option);
                window.onresize = function () {
                    fangjianChart.resize()
                };
            }


            function echartdata() {
                var myChart1 = echarts.init(document.getElementById('a1'));
                option = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                            ['product', '总规模(万m²)', '总投资额(万元)'],
                            ['房建', 43.3, 85.8, 93.7],
                            ['市政', 83.1, 73.4, 55.1]
                        ]
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {},
                    series: [{
                            type: 'bar',
                            barWidth: 10
                        },
                        {
                            type: 'bar',
                            barWidth: 10
                        }

                    ]
                };
                myChart1.setOption(option);
                window.onresize = function () {
                    myChart1.resize()
                };
            }


            function nianLingChartShow() {
                var nianlingChart = echarts.init(document.getElementById('a2'));
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br />{b}: {c} ({d}%)"
                    },
                    grid: {
                        // left: '10%',
                    },
                    title: {
                        // text: fjnumber,
                        subtext: '房建',
                        //padding: 120,
                        textStyle: {
                            color: '#333',
                            fontSize: 28,
                            // align: 'center'
                        },
                        subtextStyle: {
                            fontSize: 18,
                            color: ['#333']
                        },
                        //x: 'center',
                        x:'32%',
                        y:'center',
                        textAlign:"center"
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        x: 'right',
                        y: 'center',
                        // padding: 40,
                        // margin: 20,
                        textStyle: {
                            color: '#333',
                            fontSize: 12,
                        },
                        icon: 'circle',
                        data: ['房地产' + fjbutTotal, '公共建筑' + fjundTotal, '厂房' + fjtopTotal, '私宅' +
                            fjmainTotal
                        ]
                    },
                    color: ['#00b8fe', '#c889f7', '#f6f886', '#14d29d'],
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '60%'],
                        center: ['35%', '50%'],
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        data: [{
                                value: fjbutTotal,
                                name: '房地产' + fjbutTotal
                            },
                            {
                                value: fjundTotal,
                                name: '公共建筑' + fjundTotal
                            },
                            {
                                value: fjtopTotal,
                                name: '厂房' + fjtopTotal
                            },
                            {
                                value: fjmainTotal,
                                name: '私宅' + fjmainTotal
                            }
                        ]
                    }]
                };
                //赋值操作
                nianlingChart.setOption(option);
                window.onresize = function () {
                    nianlingChart.resize()
                };
            }
        });
    </script>
</body>

</html>